<template>
	<view class="contact-list" @touchmove.stop.prevent>
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<u-search v-model="keyword" :show-action="false" placeholder="搜索用餐人姓名" :clearabled="true"
					@search="onSearch" @clear="onSearch"></u-search>
			</view>
			<view class="search-btn" @click="onSearch">
				<text>搜索</text>
			</view>
		</view>
		<!-- 面包屑 -->
		<view class="breadcrumb">
			<view v-for="(item, index) in breadcrumbList" :key="item.id" class="breadcrumb-item" @click="handleBreadcrumbClick(index)">
				<text>{{ item.label }}</text>
				<text v-if="index < breadcrumbList.length - 1" class="separator">/</text>
			</view>
		</view>

		<!-- 列表区域 -->
		<scroll-view scroll-y class="list-content" @touchmove.stop.prevent>
			<view class="list-wrapper">
				<!-- 部门列表 -->
				<view v-for="(item, index) in currentDeptList" :key="item.id" class="list-item dept-item" @click="handleDeptClick(item)">
					<view class="item-left">
						<text>{{ item.label }} {{item.userNum?'('+item.userNum+')':''}}</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				<!-- 用户列表 -->
				<view v-for="(item, index) in currentUserList" :key="item.userId" class="list-item user-item" 
					@click="handleUserClick(item)">
					<view class="item-left">
						<view class="avatar">{{item.nickName ? item.nickName.substring(0,1) : '无'}}</view>
						<view class="user-info">
							<text class="nickname">{{ item.nickName }} <text class="phone">{{ item.phonenumber }}</text></text>
							<text class="dept">{{ item.dept.deptName }}</text>
						</view>
					</view>
					<u-icon v-if="selectedUser && selectedUser.userId === item.userId" name="checkmark" color="#2B9BFF" size="28"></u-icon>
				</view>

				<!-- 无数据提示 -->
				<u-empty v-if="!currentDeptList.length && !currentUserList.length" text="暂无数据" mode="data">
				</u-empty>
				
				<!-- 底部预留空间 -->
				<view class="bottom-space"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		treeData: {
			type: Array,
			default: () => []
		}
	},

	data() {
		return {
			keyword: '',
			currentDeptList: [], // 当前显示的部门列表
			currentUserList: [], // 当前显示的用户列表
			selectedUser: null,
			breadcrumbList: [], // 面包屑列表
			allUsers: [], // 扁平化的用户列表
		}
	},

	watch: {
		treeData: {
			handler(newVal) {
				if (newVal && newVal.length > 0) {
					this.resetData()
				}
			},
			immediate: true
		}
	},

	methods: {
		// 重置数据
		resetData() {
			this.keyword = ''
			this.selectedUser = null
			if (this.treeData && this.treeData.length > 0) {
				this.breadcrumbList = [this.treeData[0]]
				this.updateLists(this.treeData[0])
				this.allUsers = this.flattenUsers(this.treeData[0])
			} else {
				this.breadcrumbList = []
				this.currentDeptList = []
				this.currentUserList = []
				this.allUsers = []
			}
		},

		// 更新列表
		updateLists(node) {
			if (!node) return
			// 分离部门和用户列表
			console.log('更新列表', node)
			// 直接使用children数组，不需要过滤
			this.currentDeptList = node.children || []
			this.currentUserList = node.userList || []
			console.log('当前部门以及用户', this.currentDeptList, this.currentUserList)
		},

		// 处理部门点击
		handleDeptClick(item) {
			console.log('部门点击',item)
			// 添加到面包屑
			this.breadcrumbList.push(item)
			this.updateLists(item)
		},

		// 处理面包屑点击
		handleBreadcrumbClick(index) {
			// 截取到点击的位置
			this.breadcrumbList = this.breadcrumbList.slice(0, index + 1)
			// 更新列表为点击的部门的内容
			this.updateLists(this.breadcrumbList[index])
		},

		// 处理用户点击
		handleUserClick(item) {
			console.log('用户点击', item)
			this.selectedUser = item
			// 触发选择事件，将用户信息传递给父组件
			this.$emit('select', item)
		},

		// 扁平化用户列表
		flattenUsers(node) {
			if (!node) return []
			
			let users = []
			
			// 添加当前节点的用户
			if (node.userList && node.userList.length > 0) {
				users = users.concat(node.userList)
			}
			
			// 递归处理子节点
			if (node.children && node.children.length > 0) {
				node.children.forEach(child => {
					users = users.concat(this.flattenUsers(child))
				})
			}
			
			return users
		},

		// 搜索
		onSearch() {
			this.search(this.keyword)
		},

		// 确认选择
		confirm() {
			if (this.selectedUser) {
				this.$emit('select', this.selectedUser)
			} else {
				uni.showToast({
					title: '请选择用餐人',
					icon: 'none'
				})
			}
		},

		// 搜索
		search(value) {
			console.log('搜索', value)
			if (!value) {
				// 如果搜索词为空，恢复到根节点状态
				if (this.treeData && this.treeData.length > 0) {
					this.breadcrumbList = [this.treeData[0]]
					this.updateLists(this.treeData[0])
				}
				return
			}
			
			// 直接在扁平化的用户列表中搜索
			const matchedUsers = this.allUsers.filter(user => 
				user.nickName && user.nickName.toLowerCase().includes(value.toLowerCase())
			)
			console.log('搜索到的用户', matchedUsers)
			
			// 重置面包屑为根节点
			this.breadcrumbList = [this.treeData[0]]
			// 清空部门列表，只显示匹配的用户
			this.currentDeptList = []
			this.currentUserList = matchedUsers
		}
	}
}
</script>

<style lang="scss" scoped>
.contact-list {
	height: 70vh;
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
	position: relative;
	overflow: hidden;

	.search-box {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		padding: 40rpx 30rpx;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		display: flex;
		align-items: center;

		.search-input {
			flex: 1;
			margin-right: 20rpx;
		}

		.search-btn {
			width: 120rpx;
			height: 64rpx;
			background: #2B9BFF;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	.breadcrumb {
		padding: 20rpx 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #eee;

		&-item {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			
			&:last-child {
				color: #333;
				font-weight: 500;
			}

			.separator {
				margin: 0 10rpx;
				color: #999;
			}
		}
	}

	.list-content {
		flex: 1;
		height: calc(70vh - 140rpx - 50rpx - 64rpx); // 减去面包屑的高度
		box-sizing: border-box;
		
		.list-wrapper {
			padding: 0 30rpx;
			
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				background: #fff;
				border-radius: 12rpx;
				margin-top: 30rpx;

				&.dept-item {
					.item-left {
						font-size: 28rpx;
						color: #333;
					}
				}

				&.user-item {
					padding: 20rpx 30rpx;

					.item-left {
						display: flex;
						align-items: center;

						.avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 8rpx;
							background: #2B9BFF;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 32rpx;
							margin-right: 20rpx;
						}

						.user-info {
							display: flex;
							flex-direction: column;

							.nickname {
								font-size: 28rpx;
								color: #333;
								margin-bottom: 4rpx;
							}
							.dept {
								font-size: 28rpx;
								color: #666;
							}

							.phone {
								font-size: 24rpx;
								color: #666;
								margin-left: 8rpx;
							}
						}
					}

					&.selected {
						background: #f0f9ff;
					}
				}
			}
			
			.bottom-space {
				height: 50rpx;
			}
		}
	}
}
</style>